<template>
  <div class="bg">
    <nav-com
      :title="$t('guanli')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1 main-page-wrapper">
      <load-more  :onLoadMore="onLoadMore" :enableLoadMore="enableLoadMore">
        <van-cell-group inset class="m-b-10 m-t-10" v-for="(item,index) in  dataList"  @click="jumpTo('/deviceManagement_new',item.id)" :key="index">
          <div class="group-item">
            <div class="group-item-top">
              <div class="group-item-left">
                <div><img style="border-radius: 50%" :src="require('../../assets/helpRobot/touxiang@2x.png')" alt=""></div>
                <div class="management_name ell">{{ item.bname }}</div>
              </div>

              <div class="group-item-right"><van-button plain round type="info" color="#0AD39F" size="normal" @click.stop="ubind(item.userbdid,item.binding)">{{ item.binding?$t('jiechubind'):$t('yichu') }}</van-button></div>
            </div>
            <div class="group-item-content">
              <div>
                <div class="min-h15">{{ item.model }}</div>
                <div>{{ $t('biaohao') }}</div>
              </div>
              <div>
                <div class="min-h15">{{ item.power }}KW</div>
                <div>{{ $t('gonglv') }}</div>
              </div>
              <div class="group-item-content-right">
                <div class="min-h15">{{ item.connectiontime }}</div>
                <div>{{ $t('lianjieshijian') }}</div>
              </div>
            </div>
          </div>
        </van-cell-group>
<!--        <van-cell-group inset class="m-b-10 m-t-10" @click="jumpTo('/driveHistory')">-->
<!--          <div class="group-item">-->
<!--            <div class="group-item-top">-->
<!--              <div class="group-item-left">-->
<!--                <div><img src="../../assets/helpRobot/touxiang@2x.png" alt=""></div>-->
<!--                <div class="management_name">MY bike</div>-->
<!--              </div>-->

<!--              <div class="group-item-right"><van-button plain round type="info" color="#0AD39F" size="normal">{{ $t('yichu') }}</van-button></div>-->
<!--            </div>-->
<!--            <div class="group-item-content">-->
<!--              <div>-->
<!--                <div>FZ9878098</div>-->
<!--                <div>{{ $t('biaohao') }}</div>-->
<!--              </div>-->
<!--              <div>-->
<!--                <div>132KW</div>-->
<!--                <div>{{ $t('gonglv') }}</div>-->
<!--              </div>-->
<!--              <div class="group-item-content-right">-->
<!--                <div>2023.08.09</div>-->
<!--                <div>{{ $t('lianjieshijian') }}</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </van-cell-group>-->
<!--        <van-cell-group inset class="m-b-10 m-t-10" @click="jumpTo('/driveCalendar')">-->
<!--          <div class="group-item">-->
<!--            <div class="group-item-top">-->
<!--              <div class="group-item-left">-->
<!--                <div><img src="../../assets/helpRobot/touxiang@2x.png" alt=""></div>-->
<!--                <div class="management_name">MY bike</div>-->
<!--              </div>-->

<!--              <div class="group-item-right"><van-button plain round type="info" color="#0AD39F" size="normal">{{ $t('jiechubind') }}</van-button></div>-->
<!--            </div>-->
<!--            <div class="group-item-content">-->
<!--              <div>-->
<!--                <div>FZ9878098</div>-->
<!--                <div>{{ $t('biaohao') }}</div>-->
<!--              </div>-->
<!--              <div>-->
<!--                <div>132KW</div>-->
<!--                <div>{{ $t('gonglv') }}</div>-->
<!--              </div>-->
<!--              <div class="group-item-content-right">-->
<!--                <div>2023.08.09</div>-->
<!--                <div>{{ $t('lianjieshijian') }}</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </van-cell-group>-->
      </load-more>
      <van-dialog v-model="deletmodel" :title="$t('unbindtitle')" show-cancel-button @confirm="deletbick" @cancel="cancel" :confirm-button-text="$t('sure')" :cancel-button-text="$t('close')">
      </van-dialog>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import navCom from '@/components/nav-com.vue'
import loadMore from '@/components/loadmore.vue'
import { equipmentBlist, removebundling, unbundling } from '../../api/deviceManagement'
export default {
  name: 'bonusList',
  components: {
    navCom,
    loadMore
  },
  data () {
    return {
      page: 1,
      enableLoadMore: true,
      showView: true,
      title: '设备管理',
      dataList: [],
      type:'',
      deletmodel:false,
      unbindbickId:''
    }
  },
  mounted () {
    this.type = this.$route.query.canshu || ''
    this.init()
  },
  methods: {
    ubind (id, type) {
      // if (type == '1') {
      //   unbundling({ id: id }).then((res) => {
      //     if (res.code == 1) {
      //       if (this.$i18n.locale == 'zh') {
      //         this.$toast('解绑成功')
      //       } else {
      //         this.$toast('Untying is successfull')
      //       }
      //       this.dataList = []
      //       this.page = 1
      //       this.init()
      //     }
      //   })
      // } else {
      this.deletmodel = true;
      this.unbindbickId = id;
      // }
    },
    cancel () {
      this.deletmodel = false
    },
    deletbick(){
      removebundling({ id: this.unbindbickId }).then((res) => {
        if (res.code == 1) {
          if (this.$i18n.locale == 'zh') {
            this.$toast('移除成功')
          } else {
            this.$toast('Successful removal')
          }
          this.dataList = []
          this.page = 1
          this.init()
        }
      })
    },
    jumpTo (url, canshu) {
      this.$router.push({ path: url,
        query: { canshu: canshu }
      })
      localStorage.setItem('parentRouter','/deviceManagement')
    },
    onPageConfirm () {

    },
    // 返回
    backHandler () {
      if (this.type) {
        this.$router.go(-1)
      } else {
        const nav = navigator.userAgent
        if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
          phone.onBackPress()
        } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
          this.$bridge.callhandler('onBackPress', {}, res => {})
        } else {
          this.$router.go(-1)
        }
      }
    },
    clearHistory () {
      if (this.$i18n.locale == 'zh') {
        this.$toast('清理缓存成功')
      } else {
        this.$toast('Clean cache successfully')
      }
    },
    // 初始化
    init () {
      this.getmanagementList()
    },
    onLoadMore (done) {
      setTimeout(() => {
        if (!this.enableLoadMore) {
          return
        }
        this.page = this.page + 1
        this.getmanagementList()
        done()
      }, 200)
    },
    getmanagementList () {
      equipmentBlist({ page: this.page }).then((res) => {
        if (res.code == 1) {
          if (res.data.list.length < 10) {
            this.enableLoadMore = false
          }
          this.dataList = this.dataList.concat(res.data.list)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "style/_mixin.scss";
.top-view1{
  margin-top: 26.23vw;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.group-item{
  display: flex;
  flex-direction: column;
  padding: 15px;
  .group-item-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 0.02667rem solid #ebedf0;
    .group-item-left{
      flex: 2;
      display: flex;
      align-items: center;
      img{
        width: 40px;
        margin-right: 20px;
      }
      .management_name{
        font-size: 22px;
        font-family:PingFang, Helvetica;
        color: #303030;
        width: 120px;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .group-item-right{
      flex: 1;
      display: flex;
      justify-content: flex-end;
      .van-button{
        height: 35px;
      }
    }
  }
  .group-item-content{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .group-item-content-right{
      text-align: right;
    }
  }
}
.min-h15{
  min-height: 15px;
}
</style>
